<template>
  <div class="contain">
    <div class="logo">
        <!-- <img src="../../../assets/img/logo.png" alt=""> -->
        <img src="@assets/img/logo.png" alt="">
    </div>
    <div class="menu">
        <div v-for="(item,index) in memulist" :index="index" :key="index" @click="changeTab">
            {{item}}
        </div>
    </div>
    <div class="menu1">
        <span>欢迎你！</span>
        <span>注销</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "topbar",
  data(){
      return {
          memulist:[
              "地图管理",
              "单线图管理",
              "接线图管理",
              "其他功能"
          ]
      }
  },
  methods:{
    changeTab(event){
      // let menulist = {
      //   "树目录":"0",
      //   "图例":"1",
      //   "搜索":"2"
      // }
      // 移除所有tab的active标签
      event.target.parentNode.childNodes.forEach(item => {
        item.classList.remove("active");
      });
      // 添加该tab的active标签
      event.target.className = "active";
      // this.currentTabComponent = 'leftbar'+menulist[event.target.innerText];
    }
  }
};
</script>
<style lang="scss" scoped>
@import"@assets/style/variables.scss";
.contain{
    height: $topHeight;
    background-color: $topColor;
    position: relative;
    display: flex;
    justify-content: space-between;
    .logo{
        height: 100%;
    }
    .menu{
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        overflow: hidden;
        position: absolute;
        left: $leftWidth;
        .active{
          background-color: $menuClickColor;
        }
        div{
            width: 80px;
            height: 100%;
            font-size: $topFontSize;
            line-height: $topHeight;
            color: #fff;
            &:hover{
              cursor: pointer;
              background-color: $menuClickColor;
            }
        }
    }
    .menu1{
        position: absolute;
        right: 20px;
        width: auto;
        height: 100%;
        white-space: nowrap;
        color: #fff;
        font-size: $topFontSize_Quit;
        line-height: $topHeight;
        span{
            padding: 0 10px;
            cursor: pointer;
        }
    }
}
</style>